<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Vancouver Tongue</title>
<link href="/VancouverTongue/static/style.css" type="text/css"
	rel="stylesheet" />
<link rel="shortcut icon" href="/VancouverTongue/static/icon.png">
<style>
textarea {
	min-height: 200px;
	max-height: 200px;
	min-width: 400px;
	max-width: 400px;
}

.comment {
	border-top: double 5px black;
	margin-top: 20px;
}

div.pickRest {
	background-color: #F5F5F5;
	box-shadow: 10px 10px 5px #888;
	float: right;
	top: 200px;
	left: 900px;
	width: 200px;
	height: 400px;
	text-align: center;
}

div.image {
	float: right;
	padding-left: 5mm;
	text-align: left;
	margin-right: 30mm;
}

input.tony {
	font-weight: bold;
	text-decoration: underline;
	border-style: ridge;
	cursor:pointer;
}
</style>

<script type="text/javascript">
	iRating = 0;
	function colorIcons(rating) {
		var iconList = document.getElementsByName("icon");
		for ( var i = 0; i < iconList.length; i++) {
			var icon = iconList.item(i);
			if (i < rating) {
				icon.src = "/VancouverTongue/static/star_gold.png";
			} else {
				icon.src = "/VancouverTongue/static/star_white.png";
			}
		}
	}
	function onIcon(rating) {
		document.getElementById("rating").value = rating;
		colorIcons(rating);
	}
	function initRating() {
		iRating = document.getElementById("userRating").value;
	}
	function pageInit(){
		initRating();
		colorIcons(iRating);
	}
	function checkTextareLenght() {
		var limit = 500;
		var area = document.getElementById('limitInput');
		var l = area.value.length;
		if (l > limit) {
			area.value = area.value.substr(0, limit);
			l = limit;
		}
		document.getElementById('limitCount').innerHTML = l + '/'+limit;
	}
</script>
</head>
<body onload="pageInit();">
	${ALertBox}
	<jsp:include page="headTemplate.jsp" />
	<jsp:include page="RandomTemplate.jsp" />
	<p></p>
	<div class="main">
		<h2>${restaurant.restaurantName}</h2>
		<div class="image">
			<img src="${restaurant.image}" alt="Restaurant Image" width="300"
				height="250" />
		</div>
		<div class="info">
			<p>Name: ${restaurant.phone}</p>
			<p>Address: At ${restaurant.streetName},${restaurant.city}</p>
			<p>
				Website: <a href="${restaurant.website}">click here</a>
			</p>
			<p>Hours: ${restaurant.businessHour}</p>
			<p style="width:500px;">
				About Us: <br />${restaurant.description}
			</p>
			<p>Rating: ${restaurant.rating}</p>

			<h4>Your rating</h4>
			<form action="${restaurant.restaurantId}/addRating" method="post"
				onMouseOut="colorIcons(iRating);" id="iconList">
				<input value="${userRating}" id="userRating" type="hidden" /> <input
					value="" name="rating" id="rating" type="hidden" /> <input
					type="image" value="submit"
					src="/VancouverTongue/static/star_white.png" name="icon"
					onMouseOver="onIcon(1);" width="50" height="50" /> <input
					type="image" src="/VancouverTongue/static/star_white.png"
					name="icon" onMouseOver="onIcon(2);" width="50" height="50" /> <input
					type="image" src="/VancouverTongue/static/star_white.png"
					name="icon" onMouseOver="onIcon(3);" width="50" height="50" /> <input
					type="image" src="/VancouverTongue/static/star_white.png"
					name="icon" onMouseOver="onIcon(4);" width="50" height="50" /> <input
					type="image" src="/VancouverTongue/static/star_white.png"
					name="icon" onMouseOver="onIcon(5);" width="50" height="50" />
			</form>
		</div>
		<p>
			<a href="${restaurant.restaurantId}/edit">
				<input class="tony"	type="button" value="Edit Restaurant" />
			</a> 
			<a href="/VancouverTongue">
				<input class="tony" type="button" value="Back To Main" />
			</a>
			<c:if test = "${account.level >= 3}">
				<a href="${restaurant.restaurantId}/delete">
					<input class="tony" type="button" value="Delete this restaurant" />
				</a>
			</c:if>
		</p>
	</div>

	<c:if test="${empty account}">
		<div>
			<strong><em>You must log in first to leave comment</em></strong>
		</div>
	</c:if>
	<c:if test="${not empty account }">
		<div>
			<script type="text/javascript">
				function writeComment() {
					document.getElementById("commentButton").style.display = 'none';
					document.getElementById("commentForm").style.display = 'block';
				}
			</script>
			<input type="button" value="Leave Comment" id="commentButton"
				onClick="writeComment();" />

			<form id="commentForm" style="display: none;"
				action="${restaurant.restaurantId}/addComment" method="post">
				<div>
					Comment:<br />
					<textarea name="message"  id="limitInput" onkeyup="checkTextareLenght();"> </textarea>
					<div id="limitCount">0/500</div>
				</div>
				<!-- How much did you spend? <input type="text" name="priceText" /> -->
				<div>
					<input type="submit" />
				</div>
			</form>
		</div>
	</c:if>

	<c:forEach var="comment" items="${commentList}">
		<div class="comment">
			<p>${comment.message}</p>
			<p>${comment.userId} on ${comment.date}</p>
			<c:if test="${account.level >=3 || account.userId == comment.userId}">
				<form action="${restaurant.restaurantId}/deleteComment"
					method="post">
					<input type="hidden" value="${comment.commentId}" name="commentId" />
					<input type="submit" value="Delete this comment" />
				</form>
			</c:if>
		</div>
	</c:forEach>


</body>
</html>